<?php
    $rand = rand(1,10000);
?>


<div style="height: 430px;position: relative;">


    <div style="border:1px solid #DDDDDD;border-radius: 10px;  float: left; font-size: 12px; padding:10px; width: 410p;">
        <div style="font-size: 14px;font-style: italic;">
            <b>Parametros Colegio</b>
        </div>
        <div style="">
            <b>Nombre</b>: <?php echo $parametros_colegio["nombre"]; ?>
        </div>
        <div style="">
            <b>Promedio de Notas</b>: <?php echo number_format($parametros_colegio["nota_promedio_colegio"],2,".",""); ?> (promedio de los últimos 3 años)
        </div>
        <div style="">
            <b>Nota máxima promedio</b>: <?php echo number_format($parametros_colegio["nota_maxima_colegio"],2,".",""); ?>
        </div>
        <div style="">
            <b>Alumnos considerados</b>: <?php echo count($ranking_alumnos); ?>
        </div>
        <br>
        <div style="font-size: 14px;font-style: italic;">
            <b>Puntajes</b>
        </div>

        <div style="">
            <b>Promedio Ranking</b>: <?php echo number_format($promedio_ranking,2,".",""); ?>
        </div>
        <div style="">
            <b>Promedio NEM</b>: <?php echo number_format($promedio_nem,2,".",""); ?>
        </div>
        <div style="">
            <b>Ganancia</b>: <?php echo number_format((($promedio_ranking-$promedio_nem)/$promedio_nem*100),2,".",""); ?> %
            <div style="font-size: 10px;">(Promedio Ranking-Promedio NEM) / Promedio NEM</div>
        </div>
    </div>

    <div id="container_r<?php echo $rand; ?>" style="height: 400px; width: 420px; padding: 10px;"></div>
</div>
<style type="text/css">
.highcharts-title
    {
        font-size: 8px;
    }
</style>

<script>
    <?php
        foreach($ranking_alumnos as $alumno){
            $puntajes[] = "[".$alumno[0].",".$alumno[1]."]";
        }
        $puntaje_alumnos = "[".implode(",",$puntajes)."]";

        $curva_ranking = "[[4,".$parametros_colegio["nem_minimo"]."],[".$parametros_colegio["nota_promedio_colegio"].",".$parametros_colegio["puntaje_promedio_colegio"]."],[".$parametros_colegio["nota_maxima_colegio"].",".$parametros_colegio["puntaje_maximo_colegio"]."],[7,850]]";
        $curva_nem = "[[4,".$parametros_colegio["nem_minimo"]."],[7,".$parametros_colegio["nem_maximo"]."]]";
    ?>


var chart;
$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container_r<?php echo $rand; ?>',
			zoomType: 'xy'
		},
		title: {
			text: 'Distribución ranking'
		},
		subtitle: {
			text: 'Fuente: DEMRE 2011'
		},
		xAxis: {
			title: {
				enabled: true,
				text: 'Nota Enseñanza media'
			},
			startOnTick: true,
			endOnTick: true,
			showLastLabel: true,
                        min: 4,
                        max: 7.1
		},
		yAxis: {
			title: {
				text: 'Puntaje PSU'
			},
                        min: 200,
                        max: 850
		},
		tooltip: {
			formatter: function() {
					return ''+
					'Nota: '+this.x +' , Puntaje: '+ this.y +' ';
			}
		},
		legend: {
			layout: 'vertical',
			align: 'center',
			verticalAlign: 'bottom',
			floating: false,
			backgroundColor: '#FFFFFF',
			borderWidth: 1
		},
		plotOptions: {
			scatter: {
				marker: {
					radius: 2,
					states: {
						hover: {
							enabled: true,
							lineColor: 'rgb(100,100,100)'
						}
					}
				},
				states: {
					hover: {
						marker: {
							enabled: false
						}
					}
				}
			}
		},
		series: [ {
			name: 'Curva NEM',
			type: 'line',
			color: 'rgba(22, 22, 22, .5)',
			data: <?php echo $curva_nem;?>
		},{
			name: 'Curva Ranking Cruch',
			type: 'line',
			color: 'rgba(22, 223, 22, .5)',
			data: <?php echo $curva_ranking;?>
		},{
			name: 'Puntajes alumnos',
			type: 'scatter',
			color: 'rgba(223, 22, 22, .6)',
			data: <?php echo $puntaje_alumnos ;?>

		}]
	});
});

</script>